<!--
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-04-19 17:26:01
 * @LastEditTime: 2022-04-21 10:04:59
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 发布订阅模式
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>发布订阅模式</title>
</head>

<body>

</body>
<script>
  /* 
  1. 主题:售楼处
  2. 缓存列表
  3.当时间触发时,依次执行回调函数
  */

  // salesOffices.clientList = {}
  // salesOffices.listen = function (key, fn) {
  //   if (!this.clientList[key]) {
  //     this.clientList[key] = []
  //   }
  //   this.clientList[key].push(fn)
  // }
  // salesOffices.trigger = function () {
  //   const key = Array.prototype.shift.call(arguments),
  //     fns = this.clientList[key],
  //     l = fns.length
  //   for (let i = 0; i < l; i++) {
  //     /*  理解 apply(this,arguments) https://blog.csdn.net/liulanba/article/details/112981865 */
  //     fns[i].apply(this, arguments)
  //   }
  // }

  // 发布订阅工具类
  /*   const Event = {
      clientList: {},
      listen: function (key, fn) {
        if (!this.clientList[key]) {
          this.clientList[key] = []
        }
        this.clientList[key].push(fn)
      },
      trigger: function () {
        const key = Array.prototype.shift.call(arguments),
          fns = this.clientList[key],
          l = fns.length
        for (let i = 0; i < l; i++) {
          //  理解 apply(this,arguments) https://blog.csdn.net/liulanba/article/details/112981865
          fns[i].apply(this, arguments)
        }
      }
    }
    const salesOffices = {}
    function installEvent(target, source) {
      return Object.assign(target, source)
    }
    installEvent(salesOffices, Event)
    salesOffices.listen('area88', function (price, area) {
      console.log(`张三----价格:${price},面积:${area}m²`);
    })
    salesOffices.listen('area88', function (price, area) {
      console.log(`李四----价格:${price},面积:${area}m²`);
    })
    salesOffices.listen('area120', function (price, area) {
      console.log(`王五----价格:${price},面积:${area}m²`);
    })
    salesOffices.listen('area120', function (price, area) {
      console.log(`赵六----价格:${price},面积:${area}m²`);
    })
  
    salesOffices.trigger('area88', 10000, '88')
    salesOffices.trigger('area120', 10000, '120') */

  // TODO:改写 类
  class Event {
    constructor(clientList) {
      this.clientList = []
    }
    listen(key, fn) {
      if (!this.clientList[key]) {
        this.clientList[key] = []
      }
      this.clientList[key].push(fn)
    }
    trigger() {
      const key = Array.prototype.shift.call(arguments),
        fns = this.clientList[key],
        l = fns.length
      for (let i = 0; i < l; i++) {
        //  理解 apply(this,arguments) https://blog.csdn.net/liulanba/article/details/112981865
        fns[i].apply(this, arguments)
      }
    }
  }
  class SalesOffices extends Event {
    constructor() {
      super()
    }
  }
  const salesOffices = new SalesOffices()
  salesOffices.listen('area88', function (price, area) {
    console.log(`张三----价格:${price},面积:${area}m²`);
  })
  salesOffices.listen('area88', function (price, area) {
    console.log(`李四----价格:${price},面积:${area}m²`);
  })
  salesOffices.listen('area120', function (price, area) {
    console.log(`王五----价格:${price},面积:${area}m²`);
  })
  salesOffices.listen('area120', function (price, area) {
    console.log(`赵六----价格:${price},面积:${area}m²`);
  })

  salesOffices.trigger('area88', 5000, '88')
  salesOffices.trigger('area120', 10000, '120') 
</script>

</html>